<template>
  <div class="div-1">
    <div class="nav" v-for=" (item, index) in  NavOne " :key="index">
     <div class="nav-1">
        <img :src="item.URL" alt="" class="img-2">
        <div class="NavYou">
          <span class="span-1">{{item.Tuan}}人团</span>
          <span class="span-2">{{item.Biao}}</span>
          <p class="p-1">未拼中瓜分${{item.Fen}}参与奖</p>
          <p class="p-2">
            <span class="span-3">￥{{item.Money}}</span>
            <span class="span-4">已拼{{item.Jian}}件</span>
          </p>
        </div>
     </div>
     <div class="nav-2">
       {{item.Pin}}人已拼，可直接参与即可成团
     </div>
     <div class="nav-3" v-for="(items,indexs) in item.NavTwo " :key="indexs">
       <div class="div-1">
         <img :src="items.URL" alt="">
         <span class="span-1">晓月的团 只差<span class="span-1-1">1</span>人成团</span>
       </div>
       <button>去参团</button>
     </div>
    </div>
  </div>
  <div class="div-x"></div>
</template>

<script>
import xiaoxin from '../../assets/xiaoxin.jpeg'
import nvhai from '../../assets/nvhai.jpeg'
import luoli from '../../assets/luoli.jpeg'
import qinglv from '../../assets/qinglv.jpeg'
import tuzi from '../../assets/tuzi.jpeg'
export default {
 data() {
  return {
    NavOne:[{
       URL:xiaoxin,
       Tuan:2,
       Biao:'标题标题标题标题标题标题标题',
       Fen:'10.00',
       Money:'59.00',
       Jian:432,
       Pin:193,
       NavTwo:[{
           URL:nvhai,
           Cha:1,
       },{
           URL:xiaoxin,
           Cha:2,
       }]
  },{
       URL:luoli,
       Tuan:2,
       Biao:'标题标题标题标题标题标题标题',
       Fen:'10.00',
       Money:'59.00',
       Jian:432,
       Pin:193,
       NavTwo:[{
           URL:qinglv,
           Cha:1,
       },{
           URL:tuzi,
           Cha:2,
       }]
  },{
       URL:tuzi,
       Tuan:2,
       Biao:'标题标题标题标题标题标题标题',
       Fen:'10.00',
       Money:'59.00',
       Jian:432,
       Pin:193,
       NavTwo:[{
           URL:nvhai,
           Cha:1,
       },{
           URL:xiaoxin,
           Cha:2,
       }]
  },],
  }
 },
}
</script>

<style lang="less" scoped>
.div-x{
    height: 3rem;
}
 .div-1{
    padding: 0 0.7rem;
  .nav{
    padding: 1rem 0;
    margin: 1rem 0;
    background-color: #ffffff;
    border-radius: 1rem;
    .nav-1{
      height: 5.8rem;
      background-color: #ffffff;
      padding:0  0.5rem 0.5rem 0.5rem;
      display: flex;
      .img-2{
      width: 5.5rem;
      border-radius: 0.4rem;
    }
    .NavYou{
      margin-left: 0.5rem;
      .span-1{
        display: inline-block;
        width: 2.3rem;
        height: 1rem;
        text-align: center;
        border-radius: 0.2rem;
        font-size: 0.7rem;
        color: rgb(253, 253, 253);
        background-color: rgb(255, 88, 88);
      }
      .span-2{
        font-size: 0.9rem;
        margin-left: 0.3rem;
      }
      .p-1{
        width: 8rem;
        font-size: 0.7rem;
        padding: 0.1rem;
        margin: 0.3rem 0 0 0;
        border-radius: 0.2rem;
        color: rgb(230, 94, 53);
        border: 2px solid rgb(230, 94, 53);
      }
      .p-2{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .span-3{
          font-size: 1rem;
          color: rgb(209, 66, 66);
        }
        .span-4{
          font-size: 0.8rem;
          color: rgb(146, 143, 143);
        }
      }
    }
   }
   .nav-2{
    font-size: 0.8rem;
    padding: 0.5rem 0.5rem;
    background-color: #faecdd;
    color: #e8764d;
   }
   .nav-3{
     padding: 0.5rem 0.5rem 0.5rem 0;
     background-color: #ffffff;
     display: flex;
     align-items: center;
     justify-content: space-between;
     .div-1{
       img{
         width: 2rem;
         height: 2rem;
         border-radius: 3rem;
         vertical-align: middle;
       }
       .span-1{
         font-size: 0.8rem;
         margin-left: 0.5rem;
         .span-1-1{
           color: #ed3f33;
         }
       }
     }
     button{
       border: none;
       padding: 0.3rem;
       font-size: 0.7rem;
       background-color:#e97247 ;
       color: #fffdfd;
     }
   }
  }
 }
</style>